<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="@{'朔望 -'+${picture.describe}}"></title>
    <!--    Rem初始-->
    <script src="/Syzygy/static/js/RemInitialize.js"></script>
</head>
<body id="body" style="margin: 0 0 ;padding: 0 0;background-color: rgb(230,230,230);">
<!--    返回-->
<a href="/Syzygy">
    <div style="position:fixed;width: 0.1rem;height: 0.51rem ">
    </div>
</a>
<a href="/Syzygy">
    <div style="position:fixed;right:0;width: 0.1rem;height: 0.51rem ">
    </div>
</a>

<!--卡片-->
<div style="background-color: rgb(200,200,200);width: 0.8rem;height: 0.5rem;margin: 0.005rem auto;border-radius: 0.03rem">

    <!--    图片-->
    <div th:style="'float: left;width: 0.4rem;height: 0.5rem;background-image:url(' + '/Syzygy/static/imgs/pictures/' + ${picture.pictureDocumentName} + ');background-position: center center;background-size: contain;background-repeat:no-repeat'">
    </div>

    <!--  作者 描述 评论 点赞-->
    <div style="float:left;width: 0.4rem">
        <!--       头像 作者-->
        <div style="background-color: rgb(190,190,190);width:0.4rem;height: 0.05rem;border-radius:0 0.03rem 0 0">
            <div style="float:left;width: 0.06rem;height: 0.05rem">
                <!--                头像-->
                <img th:src="@{'/static/imgs/headsculpture/' + ${picture.user.headSculptureDocumentName}}"
                     style="float:left;width: 0.03rem;height: 0.03rem;margin: 0.01rem 0 0.01rem 0.03rem;">
            </div>
            <div th:text="${picture.user.nickname}"
                 style="float:left;width: 0.2rem;text-align: left;margin: 0.01rem 0.01rem 0.01rem 0.02rem;font-size: 0.02rem">

            </div>
            <div style="float:left;background: rgb(162,210,226);width: 0.07rem;height: 0.035rem;font-size: 0.02rem;text-align:center;margin:0.01rem 0 0 0 ;border-radius: 0.03rem;border: 0.001rem rgb(142,190,206);">
                <div style="margin: 0.003rem 0 0 0;">
                    关注
                </div>
            </div>
        </div>
        <!--        描述 评论-->
        <div th:text="${picture.describe}"
             style="width:0.4rem;height: 0.35rem;background-color: rgb(210,210,210);font-size: 0.02rem;">

        </div>
        <!--        点赞 购买-->
        <div style="background-color: rgb(190,190,190);width:0.4rem;height: 0.1rem;border-radius:0 0 0.03rem 0;position: absolute">
            <div style="background-color: red;width: 0.36rem;height:0.03rem;margin: 0.01rem 0.02rem 0.02rem 0.02rem">
                <!--                点赞-->
                <div style="float:left;background-color: greenyellow;width: 0.09rem;height: 0.03rem">

                </div>
                <!--                收藏-->
                <div style="float:left;background-color: saddlebrown;width: 0.09rem;height: 0.03rem">

                </div>
                <!--                评价 -->
                <div style="float:left;background-color: greenyellow;width: 0.09rem;height: 0.03rem">

                </div>
                <!--                分享 -->
                <div style="float:left;background-color: saddlebrown;width: 0.09rem;height: 0.03rem">

                </div>
            </div>
            <div style="width: 0.36rem;height:0.03rem;margin: 0 0.02rem 0.02rem 0.02rem">
                <div style="background-color:coral;float:left;width: 0.16rem;height:0.03rem;margin: 0 0.01rem;border-radius: 0.03rem;">
                    <div style="font-size: 0.02rem;text-align: center">
                        评价
                    </div>
                </div>
                <div style="background-color: #007aff;float:left;width: 0.16rem;height:0.03rem;margin: 0 0.01rem;border-radius: 0.03rem;">
                    <div style="font-size: 0.02rem;text-align: center">
                        购买
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    // const body = document.querySelector('#line1');
    // const pictureJSON = [[${pictureJSON}]];
    // let picture = JSON.parse(pictureJSON);
    // console.log(picture)
    //
    // // 添加图文卡片
    // let pictureId = picture.pictureId;
    // let pictureDescribe = picture.describe;
    // let pictureUserHeadSculptureId = picture.user.headSculptureId;
    // let pictureUsername = picture.user.username;
    //
    // let cardStr = `
    //            `;
    // body.insertAdjacentHTML("beforeend", cardStr);
</script>
</body>
</html>